<template>
	<div>
		<form action="/">
		  <van-search
		    show-action
		    placeholder="请输入搜索关键词"
			background="#1C1B20"
		  />
		</form>
		
		<!-- 宫格 -->
		<van-grid :column-num="5">
		  <van-grid-item icon="https://p1.meituan.net/jungle/8b5e1702d4145ccf058ba5fb31008c5310912.png" text="美食"/>
		  <van-grid-item icon="https://p0.meituan.net/jungle/45ff2f098a20a77122bff8385192f0ec10547.png" text="美团超市" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/12a9834827909fa55f54bce96e67470711250.png" text="生鲜果蔬" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/da9181f93dd2e11c5d74cf685470408f10016.png" text="美团专送" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/83bfbcf07221cb1ccbcd9114e81ec7ac9209.png" text="快餐简食" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/c1048e334022a93221b0e63bbfb998b18861.png" text="午餐优选" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/e54f1fe77b0588d2dfe82a12e424108a9450.png" text="甜点饮品" />
		  <van-grid-item icon="https://p0.meituan.net/jungle/2eee7747fd143249b100b9fa5ee5e31d9873.png" text="家常菜" />
		  <van-grid-item icon="https://p0.meituan.net/jungle/2ec76f8f4f21a4ec163adc7fccfa1a399428.png" text="小吃馆" />
		  <van-grid-item icon="https://p1.meituan.net/jungle/dfd03fd91f640682c16179ba85837f739679.png" text="鲜花蛋糕" />
		</van-grid>
		
		<div style="width: 100%;height: 31px;text-align: center;margin-top: 5px;font-size: 21px;">附近商家</div>
		
		<van-tabs>
		  <van-tab title="综合排序">综合排序</van-tab>
		  <van-tab title="销量最高">销量最高</van-tab>
		  <van-tab title="距离最近">距离最近</van-tab>
		  <van-tab title="筛选">筛选</van-tab>
		</van-tabs>
		
		<van-card
		 v-for="(item,index) in CardList" :key="index"
		  :num="item.monthSales"
		  :price="item.actualPrice"
		  :desc="item.desc"
		  :title="item.dtitle"
		  :thumb="item.mainPic"
		  @click="goto"
		/>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				CardList : []
			}
		},
		mounted() {
			this.$axios.get('http://api.kudesoft.cn/tdk/goods').then(res => {
				this.CardList = res.data.data.data.list
			})
		},
		methods:{
			goto(){
				this.$router.push({
					path:'info'
				})
			}
		}
	}
</script>

<style scoped>
	.van-tab__pane{
		display: none;
	}
</style>
